<template>
    <div>
        <div style="margin-top:2.5rem;">
            <navtop :title="'用户订单'"></navtop>
        </div>
        <div class="orderlistContai">
            <div v-for="(item, index) in userOrderList" :key="index" v-show="notempty" class="list">
                <div class="left">
                    <mt-switch @change="changeFlags(item,index)" v-model="item.flags"></mt-switch>
                </div>
                <div class="right">
                    <div class="rightlef">
                        <img :src="item.goods.goodCoverImg" alt="加载失败" />
                    </div>
                    <div class="rightright">
                        <div class="goodname">{{item.goods.goodName}}</div>
                        <div class="price">
                            <span>{{item.goods.goodPrice}}￥&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <span>x {{item.goodsnums}}</span>
                            <span>
                                <button @click="remove(item.goods,index)">移除</button>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="paynav">
                <div class="totalprice">{{totalPrices}}￥</div>
                <div class="totalnums">{{totalnumbers}}</div>
                <div class="paybtn">
                    <mt-button @click="goTPay" type="primary" size="small">立即支付</mt-button>
                </div>
            </div>
            <div v-show="!notempty" class="empty">
                <div class="enptytext">剁完啦！</div>
                <mt-button @click="goindex" class="btns" plain type="primary" size="large">去逛逛~</mt-button>
            </div>
        </div>
    </div>
</template>


<script>
import navtop from "../navtop/nav.vue";
import { Toast } from "mint-ui";
export default {
    data() {
        return {
            notempty: false,
            userOrderList: [],
            totalnumbers: 0,
            totalPrices: 0
        };
    },
    methods: {
        // 去逛逛
        goindex() {
            this.$router.push({ name: "home" });
        },
        // 移除
        remove(item, index) {
            this.$ajax
                .delete("/order/" + item.pk)
                .then(res => {
                    this.userOrderList.splice(index, 1);
                    Toast({
                        message: "已移除！",
                        position: "top"
                    });
                })
                .catch(err => {
                    Toast({
                        message: "网络错误",
                        position: "top"
                    });
                });
        },
        // 添加结算或移除结算---计算总数及总价
        changeFlags(item, index) {
            //console.log(item);
            if (item.flags) {
                this.totalnumbers = this.totalnumbers + item.goodsnums;
                this.totalPrices += item.goodsnums * item.goods.goodPrice;
            } else {
                this.totalnumbers = this.totalnumbers - item.goodsnums;
                this.totalPrices -= item.goodsnums * item.goods.goodPrice;
            }
        },
        //　根据数据列表计算总数总价
        counters(list) {
            let totalNums = 0;
            let totalPrice = 0;
            list.forEach(item => {
                if (item.flags) {
                    totalNums += item.goodsnums;
                    totalPrice += item.goods.goodPrice * item.goodsnums;
                } else {
                    totalNums = totalNums - item.goodsnums;
                    totalPrice -=
                        totalPrice - item.goods.goodPrice * item.goodsnums;
                }
            });
            this.totalnumbers = totalNums;
            this.totalPrices = totalPrice;
        },
        // 去支付
        goTPay() {
            Toast({
                message: "申请不到接口...",
                position: "top"
            });
        }
    },
    mounted() {
        let orderlists = this.$store.state.order;
        orderlists.forEach(item => {
            item.flags = true;
        });
        this.userOrderList = orderlists;
        //console.log(this.userOrderList);

        if (this.$store.state.order.length > 0) {
            this.notempty = true;
        } else {
            this.notempty = false;
        }
        this.counters(this.userOrderList);
    },
    components: {
        navtop
    }
};
</script>


<style lang="scss" scoped>
.empty {
    margin-top: 45%;
    .enptytext {
        text-align: center;
        font-size: 1rem;
        font-style: italic;
        opacity: 0.5;
    }
    .btns {
        margin-top: 30px;
    }
}
.orderlistContai {
    padding: 2px;
    .list {
        height: 80px;
        display: flex;
        padding: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        margin-top: 5px;
        .left {
            width: 20%;
            display: flex;
            justify-content: center;
        }
        .right {
            display: flex;

            width: 80%;
            .rightlef {
                width: 30%;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .rightright {
                width: 70%;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                padding-left: 5px;
                padding-right: 5px;
                .price {
                    display: flex;
                    justify-content: space-between;
                    span:nth-child(1) {
                        width: 20%;
                        color: red;
                        text-align: center;
                    }
                    span:nth-child(2) {
                        width: 40%;
                        text-align: right;
                    }
                    span:nth-child(3) {
                        width: 40%;
                        text-align: center;
                        button {
                            border-radius: 8px;
                            border: none;
                            background-color: crimson;
                            color: white;
                            opacity: 0.5;
                        }
                    }
                }
            }
        }
    }
}
.paynav {
    margin-top: 25px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    display: flex;
    height: 40px;
    justify-content: space-around;
    .totalprice {
        display: flex;
        color: red;
        flex-direction: column;
        justify-content: center;
    }
    .totalnums {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .paybtn {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}
</style>